<template>
	<div id="nishi">
		<ul id="navb">
			<router-link to="/films/Hot" custom v-slot="{navigate,isActive}">
				<li @click="navigate" >
					<span :class="isActive?'miaohao':''">正在热映</span>
				</li>
			</router-link>
			<router-link to="/films/Soon" custom v-slot="{navigate,isActive}">
				<li @click="navigate">
					<span :class="isActive?'miaohao':''">即将上映</span>
				</li>
			</router-link>
		</ul>
		<router-view></router-view>
	</div>
</template>

<script type="text/javascript">
</script>

<style type="text/css" scoped="scoped">
	#navb{
		display: flex;
		justify-content: space-around;
		align-items: center;
		height: 2.5rem;
		line-height: 2.5rem;
		list-style-type: none;
		position: sticky;
		top: 0;
		background-color: white;
		z-index: 1;
	}
	#navb>li{
		height: 100%;
	}
	.miaohao{
		color: red;
		border-bottom: red 0.125rem solid;
		height: 3.0625rem;
		display: block;
		height: 100%;
		box-sizing: border-box;
	}
	li{
		overflow: auto;
	}
</style>

